import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { MENU } from '../service/cfg.service'
declare var window;
@Component({
  selector: 'slide-menu',
  templateUrl: './slide-menu.component.html',
  styleUrls: ['./slide-menu.component.scss']
})
export class SlideMenuComponent implements OnInit {
  @Input() isShowMenu: Boolean;
  menu: Object[] = MENU;
  classNames: String = 'hide';
  constructor(
    private router: Router,
  ) {

  }

  ngOnInit() {

  }

  goto(url: string) {
    this.router.navigate([url])
  }

  showMenu() {
    this.isShowMenu = !this.isShowMenu

    if (this.isShowMenu==true) {
      this.classNames = 'animated slideOutLeft'
    } else {
      this.classNames = 'animated slideInLeft'
    }

    this.listenAnimateEnd(() => {
      console.log('listenAnimateEnd')
      this.listenAnimateEnd(() => {
        console.log('remove event listener')
      }, true)
    })
    return false
  }

  //css3动画结束执行方法
  listenAnimateEnd(callback: Function, isRemvoe: Boolean = false) {
    let animationEnd: String[] = ['webkitAnimationEnd', 'mozAnimationEnd', 'MSAnimationEnd', 'oanimationend', 'animationend']

    animationEnd.forEach(item => {
      //console.log(index)
      if (isRemvoe == false) {
        window.document.getElementById('slidemenu').addEventListener(item, callback);
      } else {
        window.document.getElementById('slidemenu').removeEventListener(item);
      }
    })



  }

}
